<template>
  <div class="planet-chart">
    <canvas id="planet-chart7"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  name: "board7",
  components: {},
  props: {},
  data() {
    return {
    }
  },
  methods: {
    initFn(){
      const ctx = document.getElementById('planet-chart7');
      const labels = ['temperature1', 'temperature2', 'temperature3'];  // 设置 X 轴上对应的标签
      const data = {
        labels: labels,
        datasets: [{
          label: 'Column chart',
          data: [65, 59, 80],
          backgroundColor: [      // 设置每个柱形图的背景颜色
            'rgba(255, 99, 132, 0.8)',
            'rgba(255, 159, 64, 0.8)',
            'rgba(255, 205, 86, 0.8)',
          ],
          borderColor: [     //设置每个柱形图边框线条颜色
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)'
          ],
          borderWidth: 1     // 设置线条宽度
        }]
      };
      const config = {
        type: 'bar', // 设置图表类型
        data: data,  // 设置数据集
        options: {
          responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
          maintainAspectRatio: false,// 保持图表原有比例
          scales: {
            y: {
              beginAtZero: true // 设置 y 轴从 0 开始
            }
          }
        },
      };
      new Chart(ctx, config);
    }
  },
  mounted() {
    this.initFn()
  }
}
</script>

<style scoped>

#planet-chart7{
  height: 100%;
}
</style>
